﻿<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>
        Resource management
    </title>

    
    <!--<link href='https://fullcalendar.io/assets/demo-to-codepen.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/timeline@4.3.0/main.min.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.3.0/main.min.css' rel='stylesheet' />-->


    <link href="fullcalander.css" rel="stylesheet" />
    <style>
        .fc-widget-content {
            height: 60px;
        }

        .fc-body .fc-resource-area .fc-cell-content {
            padding-top: 8px;
            padding-bottom: 8px;
            text-align: center;
            width: 120px;
        }

        html, body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0px auto;
            background-color: #fff;
            padding: 10px;
        }


        .fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active {
            color: #8d5502;
            background-color: #FFEB3B;
            border-color: #dc9110;
        }

        .fc-button-primary {
            color: #fff;
            background-color: #FF9800;
            border-color: #FF5722;
        }

            .fc-button-primary:hover {
                color: #8d5502;
                background-color: #FFEB3B;
                border-color: #dc9110;
            }

            .fc-button-primary:disabled {
                color: #000;
                background-color: #c3c6c8;
                border-color: #ababac;
            }

        .fc-timeline-event .fc-title-wrap {
            flex-grow: 1;
            min-width: 0;
            cursor: pointer;
        }
    </style>
    <!--<script src='https://fullcalendar.io/assets/demo-to-codepen.js'></script>
    <script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/timeline@4.3.0/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/resource-common@4.3.1/main.min.js'></script>
    <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.3.0/main.min.js'></script>-->
    
    <script src="myfullcalandar.js"></script>
    <script src="jquery-2.2.1.min.js"></script>
    
    <script>
 var myResource =
[{
    "id": "a",
    "title": "Auditorium A"
}, {
    "id": "b",
    "title": "Auditorium B",
    "eventColor": "green"
}, {
    "id": "c",
    "title": "Auditorium C",
    "eventColor": "orange"
}, {
    "id": "d",
    "title": "Auditorium D",
    "children": [{
        "id": "d1",
        "title": "Room D1"
    }, {
        "id": "d2",
        "title": "Room D2"
    }]
}, {
    "id": "e",
    "title": "Auditorium E"
}, {
    "id": "f",
    "title": "Auditorium F",
    "eventColor": "red"
}, {
    "id": "g",
    "title": "Auditorium G"
}, {
    "id": "h",
    "title": "Auditorium H"
}, {
    "id": "i",
    "title": "Auditorium I"
}, {
    "id": "j",
    "title": "Auditorium J"
}, {
    "id": "k",
    "title": "Auditorium K"
}, {
    "id": "l",
    "title": "Auditorium L"
}, {
    "id": "m",
    "title": "Auditorium M"
}, {
    "id": "n",
    "title": "Auditorium N"
}, {
    "id": "o",
    "title": "Auditorium O"
}, {
    "id": "p",
    "title": "Auditorium P"
}, {
    "id": "q",
    "title": "Auditorium Q"
}, {
    "id": "r",
    "title": "Auditorium R"
}, {
    "id": "s",
    "title": "Auditorium S"
}, {
    "id": "t",
    "title": "Auditorium T"
}, {
    "id": "u",
    "title": "Auditorium U"
}, {
    "id": "v",
    "title": "Auditorium V"
}, {
    "id": "w",
    "title": "Auditorium W"
}, {
    "id": "x",
    "title": "Auditorium X"
}, {
    "id": "y",
    "title": "Auditorium Y"
}, {
    "id": "z",
    "title": "Auditorium Z"
}];



myResource =
[{
    "id": "a",
    "title": "Staff 1"
}, {
    "id": "b",
    "title": "Staff 2",
    "eventColor": "green"
}, {
    "id": "c",
    "title": "Staff 3",
    "eventColor": "orange"
}, {
    "id": "d",
    "title": "Staff 4",
    "eventColor": "orange"
}, {
    "id": "e",
    "title": "Staff 5"
}];


        var myEvents = [{
            "resourceId": "a",
            "title": "Porject A",
            "start": "2019-09-24",
            "end": "2019-10-18"
        }, {
            "resourceId": "b",
            "title": "Porject B",
            "start": "2019-09-17",
            "end": "2019-10-02"
        }, {
            "resourceId": "c",
            "title": "Porject C",
            "start": "2019-09-22",
            "end": "2019-09-29"
        }, {
            "resourceId": "d",
            "title": "Porject D",
            "start": "2019-09-26",
            "end": "2019-09-30"
        }, {
            "resourceId": "e",
            "title": "Porject A",
            "start": "2019-09-25",
            "end": "2019-10-02",
            "source": { id: "123" }
        }
        , {
            "resourceId": "e",
            "title": "Porject A",
            "start": "2019-09-25",
            "end": "2019-11-30",
            "url": "http://www.baidu.com",
            
        }];


        console.log(myResource);
        var calendar;
        function LoadCalendar() {
            var calendarEl = document.getElementById('calendar');
            calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'resourceTimeline'],
                timeZone:false,
                header: {
                    left: 'today prev,next',
                    center: 'title',
                    //right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
                    right: 'resourceTimelineMonth,resourceTimeline3Month,resourceTimeline6Month,resourceTimelineYear'
                },
                defaultView: 'resourceTimelineMonth',
                scrollTime: '08:00',
                aspectRatio: 1.5,
                eventLimit: true,
                navLinks: true,
                views: {
                    resourceTimeline3Month: {
                        type: 'resourceTimelineMonth',
                        duration: { months: 3 },
                        buttonText: '3 month'
                    },
                    resourceTimeline6Month: {
                        type: 'resourceTimelineMonth',
                        duration: { months: 6 },
                        buttonText: 'harf year'
                    }
                },

                editable: false,
                resourceLabelText: 'Staff',
                //resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
                resources: function (parameter, callback) {
                    console.log("resources--parameter",parameter);
                    callback(myResource);
                    setTimeout(function () {
                        $(".fc-widget-content").find(".fc-cell-text").each(function (index, item) {
                            console.log("staff", $(this).text());
                            var htm = $(this).html();
                            if (htm.indexOf("<img style=") >= 0) return;
                            var text = $(this).text();
                            $(this).prepend("<img style='width:30px;height:30px;' src='http://booking.fjyclound.cn/files/upload/zhangouchuangzi.jpg'/><br>");
                        });
                    }, 500);
                },
                //events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
                //events: myEvents
                events: function (parameter, callback) {
                    console.log("events-parameter:",parameter);
                    setTimeout(function () {
                        $(".fc-license-message").hide();
                        $(".fc-timeline-event").attr("target", "_blank");
                    }, 500);
                    getEvents(parameter, callback);
                },
                eventClick: function (obj) {
                    console.log(obj.event);
                    console.log(obj.event.title);
                },
                eventMouseover: function( event, jsEvent, view ) { //鼠标划过的事件
                    layer.tips(event.remarks, this, {tips : 1});
                },
                eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
                    var index = layer.tips();
                    layer.close(index); 
                }
            });
            calendar.render();
        }
 




  function getEvents(parameter, callback) {       
      callback(myEvents);
  }

    </script>

</head>
<body>
    <div class='demo-topbar'>
        <button data-codepen class='codepen-button'>Edit in CodePen</button>
        Custom-duration timeline views
    </div>

    <div>
        <button id="newCalendar">Updates</button>
    </div>

    <div id='calendar'></div>
    <script>
        $("#newCalendar").click(function () {
            calendar.destroy();
            LoadCalendar();
        });
        $(function () {
            LoadCalendar();

            $(".fc-resourceTimelineMonth-button,.fc-resourceTimeline3Month-button,.fc-resourceTimeline6Month-button,.fc-resourceTimelineYear-button").on('click', function () {
                setTimeout(function () {
                    $(".fc-timeline-event").attr("target", "_blank");
                    $(".fc-widget-content").find(".fc-cell-text").each(function (index, item) {
                        console.log("staff", $(this).text());
                        var htm = $(this).html();
                        if(htm.indexOf("<img style=")>=0)return;
                        var text = $(this).text();
                        //http://hkapppwv918/ImageWebApi/api/Image/5479?type=1
                        $(this).prepend("<img style='width:30px;height:30px;' src='http://booking.fjyclound.cn/files/upload/zhangouchuangzi.jpg'/><br>");
                    });
                }, 500);
            });
            $(".fc-prev-button,.fc-next-button").on("click", function () {
                $(".fc-timeline-event").attr("target", "_blank");
            });

            //添加title的属性
            $(".fc-title").each(function (i, o) {
                console.log($(this).html());
                var text = $(this).html();
                $(this).parent().attr("title", text);
            });
        });

      
    </script>
    
</body>

</html>
